<template>
  <div class="down-list" :class="{active:showDownList}">
            <div class="down-list-part">
                <span class="down-list-span"  @click="select($event)" :class="{navDown:type==='navType'}">
                    {{showText||initText||'请选择'}}
                <img :class="{navList:type==='navType',turn180:showDownList}" :src="showDownList?upImg?upImg:downImg:downImg" />
                    </span>
                <div v-show="showDownList" ref="downMask" @click="showDownList=!showDownList" @touchmove.prevent class="down-mask"></div>
                <ul v-show="showDownList" class="down-list-ul">
                    <li v-for="item in data" :class="{active:selectId===item.id}" @click="selectItem($event,item)">
                        {{item.name}}
                    </li>
                </ul>
            </div>
  </div>
</template>

<script>
export default {
  name: 'down-list',
  components: {

  },
  data: function () {
    return {
      showDownList: false,
    //   selectId:this.id
    //   selectName :''
      /*data:[{name:"第五讲",id:1},{name:"第六讲",id:2}],*/
    }
  },
  props:['data','value','downImg','upImg','id','type','cb','initText'],
//   which:{
//       value:function(){
//           if(this.value != this.selectName ){
//               this.selectName = this.value
//           }
//       }
//   },
  computed:{
      selectId:function(){
        return this.id;
      },
    showText:function(){
        if(!this.selectId){
            return this.initText||"请选择"
        }else{
          for(var i = 0 ;i < this.data.length ;i++ ){
            if(this.data[i].id  == this.selectId ){
                return this.data[i].name
            }
          }
          return this.initText||'请选择'

        }

    }
  },
  created:function(){
    //   console.log(this.value,"dx")
            // if(this.value){
            //     this.selectName  = this.value
            // }else{
            //     this.selectName='请选择'
            // }
        //   this.showText="请选择"
  },
  methods:{
      init:function(){
        console.log(this.$refs.downMask)
      },
      select:function(e){
        if(!$(e.target).parent().parent().hasClass("active")){
          this.cb&&this.cb();
        }
          this.showDownList=(!this.showDownList);
//          $(".down-mask").css({top:$(".select-list").offset().top+$(".select-list").height()+2});
      },
      selectItem:function(e,item){
        this.showDownList=(!this.showDownList);
        this.showText=item.name
        this.selectId=item.id
        this.$emit('input',item)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.down-list-ul{
    position: fixed;
    z-index: 100;
    /*background: white;*/
    width: 100%;
    /*bottom: -9.5rem;*/
    /*border: 2px solid #17c3a0;*/
    left: -.2rem;
    text-align: left;
    background: white;
    color: #333333;
    max-height: 28rem;
    overflow: scroll;
    font-size: 2.8rem;
}
.down-list-ul li{
    height: 5.5rem;
    line-height: 5.5rem;
    border-bottom: 2px solid #ddf5ff;
    /*padding-left: 3rem;*/
    text-align: center;
}
.down-list-ul li.active{
    background: #ddf5ff;
}
.down-list-span{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.down-list-part {
    width: 100%;
    height: 100%;
    /*background: white;*/
    position: relative;
    border-radius: .6rem;
    /*border: 2px solid #17c3a0;*/
    /*padding: 0 3rem;*/
}

.down-list-part span {
    display: inline-block;
    height: 100%;
    width:100%;
    box-sizing: border-box;
    padding: 0 3rem;
    border: 0;
    font-size: 3rem;
    /*color: white;*/
    position: relative;
    /*left: 2px;*/

}

.down-list-part img {
    height: 1.2rem;
    width: 2rem;
    position: absolute;
    right: 0rem;
    top: 50%;
    margin-top: -.6rem;
    /*float: right;
    clear: both;*/
    /*vertical-align: middle;*/
}

.down-mask{
    position: fixed;
    background: black;
    opacity: .5;
    height: 100%;
    width: 100%;
    top: 16.2rem;
    left: 0;
}

.navDown{
    text-align: center !important;
}
.navList{
    position: relative !important;
    top:-.3rem !important;
}
.turn180{
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
}
</style>
